/**
 * @file inforevise/Home.js
 *  密码修改
 * @author
 */

import React, {Component,PropTypes} from 'react';
import {connect} from 'dva';
import {routerRedux,withRouter } from 'dva/router';
import { Form, Input,Card, Button, Row, Col } from 'antd';
import Tabtitle from '../../../components/common/TabTitle';

import styles from './home.less';

const FORM_ITEM_LAYOUT = {
	labelCol: {
		xl:{
			span:8
		},
		lg:{
			span:8
		},
		xs: {
			span: 4,
		},
		sm: {
			span: 4,
		},
	},
	wrapperCol: {
		xl:{
			span:8
		},
		lg:{
			span:8
		},
		sm: {
			span: 10,
		},
		xs: {
			span: 8,
		},
	},
};
const FormItem = Form.Item;
const Passwordrevise = ({
	dispatch,
	passwedit,
	location,
	login,
	form: { 
			getFieldDecorator,
			validateFields,
			getFieldValue
		 },
}) => {
	const userdata = login.userInfo;
	const username = userdata.username
	console.log('a00<>>',username)
	function handleSubmit(e) {
		e.preventDefault();
  validateFields((err, values) => {
   if (!err) {
    console.log('Received values of form: ', values);
    dispatch({
					type: 'passwedit/savepassword',
					payload: {
						...values,
						username:username
					}
				})
  	}
  });
	}
	function checkPassword (rule, value, callback){
			console.log('rule>>>>',rule,'value>>',value)
			if (value && value !== getFieldValue('password')) {
				callback('两次密码不一致,重新输入!');
			} else {
				callback();
			}
		}
	function checkConfirm (rule, value, callback){
  if (value) {
   validateFields(['confirm'], { force: true });
  }
  callback();
	}
		return (
			<div>
				<Tabtitle value={'密码修改'}/>
				<div className="page-info-home content-inner" style={{ background: '#ECECEC', padding: '30px' }}>
					<Card >
						<Form onSubmit={handleSubmit} className={styles.forminfo}>
							<FormItem
								{...FORM_ITEM_LAYOUT}
								label="旧密码"
								hasFeedback
							>
								{getFieldDecorator(
									'oldPassword',
									{
										rules: [
											{ required: true,whitespace: true, message: '请输入旧密码!' },
										],
									},
								)(
									<Input type="password"/>,
								)}
							</FormItem>
							<FormItem
								{...FORM_ITEM_LAYOUT}
								label="新密码"
								hasFeedback
							>
								{getFieldDecorator(
									'password',
									{
										rules: [
											{ required: true,whitespace: true, message: '请输入新密码!' },{
												validator: checkConfirm,
											},
											{ 
												pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z@#$%&*_]+$)(?![a-z0-9]+$)(?![a-z@#$%&*_]+$)(?![0-9@#$%&*_]+$)[a-zA-Z0-9@#$%&*_]{8,20}$/, message: '密码长度8-20，且包含数字、大小写、支持特殊字符(@,#,$,%,&,*,_)!' 
											},
											// {
											// 	pattern:!/^[`!~()<>?:"{},.\/;'[\]]$/im, message: '包含非法字符(!,~,(,),[,],<,>,?,:,/,\,|)!' 
											// }
										],
									},
								)(
									<Input type="password"/>,
									)}
							</FormItem>

							<FormItem
								{...FORM_ITEM_LAYOUT}
								label="确认新密码"
								hasFeedback
							>
								{getFieldDecorator(
									'confirm',
									{
										rules: [
											{ required: true, whitespace: true, message: '请再输入新密码!' },{
												validator: checkPassword,
											},
											{ 
												pattern: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z@#$%&*_]+$)(?![a-z0-9]+$)(?![a-z@#$%&*_]+$)(?![0-9@#$%&*_]+$)[a-zA-Z0-9@#$%&*_]{8,20}$/, message: '密码长度8-20，且包含数字、大小写、支持特殊字符(@,#,$,%,&,*,_)!' 
											},
										],
									},
								)(
									<Input type="password"/>,
								)}
							</FormItem>
							<FormItem
								wrapperCol={{
									xl: { span: 13, offset: 8 },
									lg: { span: 13, offset: 8 },
									xs: { span: 8, offset: 4 },
									sm: { span: 6, offset: 7 },
								}}
							>
								<Row >
									<Col span={6} push={6}>
										<Button type="primary" htmlType="submit" size="large" to="/"  >提交</Button>
									</Col>
									
								</Row>
							</FormItem>
						</Form>
					</Card>
				</div>
			</div>
		)
}
Passwordrevise.propTypes = {
	// form: PropTypes.object.isRequired,
}

export default connect(({login,infoedit})=>({login,infoedit}))(Form.create()(Passwordrevise))